<template>
  <div class="main_body1">
    <!-- 头部内容 -->
    <div class="container_top">
      <div class="selectDate">
          <div class="picker_txt">
            <input id="nowmonth" type="month" v-model="date" min="2021-01" max="2021-05" @change="bindDateChange()" />
          </div>
      </div>
      <div style="display:flex;margin-top: 10px;">
        <div class="container_top_right1" v-if="yigeiEarnings">
          <span>已发放</span>
          <span>+{{yigeiEarnings}}</span>
        </div>
        <div class="container_top_right2" v-if="sumEarnings">
          <span>总收益</span>
          <span>+{{sumEarnings}}</span>
        </div>
      </div>
    </div>
    <!-- 暂无数据 -->
    <div class="header" v-if="!earningsList || earningsList == ''">
      <span style="font-weight:bolder;color:#49CCC3;">暂无数据~</span>
    </div>
    <!-- 展示数据 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item v-model="item.revenue"  v-for="(item, index) in earningsList" :key="index" title="快手号" :name="index">
        <div style="display: flex;justify-content: space-between;">
          <span style="margin: 0 20px;">{{item.day}} 收益</span>
          <span style="margin: 0 20px;">+{{item.revenue}}</span>
        </div>
      </van-collapse-item>
    </van-collapse>
    <!-- block -->
    
  </div>
</template>
<script>
var utils = require("../../utils/utils");
var baseConfig = require("../utils/baseConfig");

import Vue from 'vue';
import { Collapse, CollapseItem, DatetimePicker, Picker } from 'vant';

Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(DatetimePicker);
Vue.use(Picker);

export default {
  name:'toEarningRecord',
  data() {
    return {
      activeNames: [],
      date: '',
      // earningsList: [{
      //   day: '2021-05-08',
      //   revenue: '5.00',
      // },{
      //   day: '2021-05-11',
      //   revenue: '6.00',
      // },{
      //   day: '2021-05-17',
      //   revenue: '8.00',
      // }],
      earningsList: [],
      is_weixin: '2',
      priceType: 'cpm',
      sumEarnings: '',
      yigeiEarnings: '',
    };
  },
  created() {
    this.getDateData();
  },
  methods: {
    bindDateChange(){
      console.log('选中月份',this.$data.date);
      let list = this.$data.date.split('-');
      let year = list[0];
      let month = list[1];
      this.getMonthFirstLastDay(year, month);
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    },
    async getData() {
      await this.get_earnings_record_data()
    },
    get_earnings_record_data() {
      // let loginUserId = 'ohI6C4tTiL0skHDt-FaRfOnBMkI0';
      let loginUserId = JSON.parse(localStorage.getItem('userInfo')).openid;
      let uid = JSON.parse(localStorage.getItem('userInfo')).id;
      this.$http.post(`${baseConfig.url}tuiwaApp/get_earnings_record_data?loginUserId=` + loginUserId
        + '&uid=' + uid
        + '&start_time=' + this.start_time
        + '&end_time=' + this.end_time
        + '&is_weixin=' + this.is_weixin
        + '&priceType=' + this.priceType
      )
        .then(res => {
          console.log(res.data.data);
          this.sumEarnings = res.data.data.sumEarnings
          this.yigeiEarnings= res.data.data.yigeiEarnings
          this.earningsList= res.data.data.earningsList
          console.log(this.earningsList);
        })
        .catch(
          err => {
            console.log(err);
          }
        )
    },
    getDateData: function (e) { // 进入页面默认年月
      var timestamp = Date.parse(new Date());
      var date = new Date(timestamp);
      var Y = date.getFullYear(); // 获取年 
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); // 获取月
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); // 获取日
      const yearMonth = Y + '-' + M;
      // console.log(yearMonth);
      this.yearMonth = yearMonth
      this.date = yearMonth
      this.year = Y
      this.month = M
      this.day = D
      this.getMonthFirstLastDay(Y, M)
    },
    getMonthFirstLastDay(year, month) {
      var firstDay = new Date(year, month - 1, 1); //这个月的第一天
      var currentMonth = firstDay.getMonth(); //取得月份数
      var lastDay = new Date(firstDay.getFullYear(), currentMonth + 1, 0); //是0而不是-1
      let start_time = utils.formatDate(firstDay, 'yyyy-mm-dd')
      let end_time = utils.formatDate(lastDay, 'yyyy-mm-dd')
      this.start_time = start_time;
      this.end_time = end_time;
      console.log('start_end_time', this.yearMonth, this.start_time, this.end_time)
      this.getData();
    },
  },
}
</script>
<style scoped>
.no_data {
  margin: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.no_data span {
  font-weight: bolder;
  color: #fff;
}

.select {
  height: 200px;
}

.selectDate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #fff;
  padding: 0 10px;
  height: 25px;
  margin-top: 20px;
}

.container_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #4B4E5A;
  height: 60px;
}

.container_top .container_top_right1 {
  display: flex;
  flex-direction: column;
  color: red;
  margin-right: 10px;
  text-align: center;
  /* margin-top: 10px; */
}

.container_top .container_top_right2 {
  display: flex;
  flex-direction: column;
  color: #49ccc3;
  text-align: center;
  /* margin-top: 10px; */
}

.container_list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
  background: #f9f6f5;
  border-bottom: 1px solid #4B4E5A;
}

.container_list .container_list_head {
  display: flex;
  flex-direction: row;
}

.container_list .container_list_main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container_list .container_list_main .iconfont {
  font-size: 16px;
  color: #64676E;
  margin: 5px;
}

.select-icon image {
  width: 15px;
  height: 8px;
  display: block;
  /* background-color: red; */
  margin-top: 8px;
}

.kind-list-item-hd .list_num {
  height: 10px;
  line-height: 10px;
  color: #49ccc3;
  font-size: 20px;
  position: absolute;
  right: 5%;
}

.kind-list-item-hd .container_list_right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.container_list .name {
  color: #64676E;
  font-size: 12px;
  margin-left: 25px;
}

.container_list .num1 {
  height: 10px;
  line-height: 20px;
  color: #16AE12;
  font-size: 16px;
}

.container_list .num2 {
  height: 10px;
  line-height: 20px;
  color: #16AE12;
  font-size: 16px;
}

.header {
  margin: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -------------------------------------------------------------------------------- */
.navigator-box {
  opacity: 0;
  position: relative;
  background-color: #fff;
  line-height: 1.41176471;
  font-size: 17px;
  transform: translateY(-50%);
  transition: 0.3s;
  z-index: 999;
}

.navigator-box-show {
  opacity: 1;
  transform: translateY(0);
}

.navigator {
  padding: 10px 15px;
  position: relative;
  display: flex;
  align-items: center;
  color: #d8d8d8;
  background: #f9f6f5;
}

.navigator:before {
  content: " ";
  position: absolute;
  left: 15px;
  top: 0;
  right: 15px;
  height: 1px;
  border-top: 1px solid #d8d8d8;
  color: #d8d8d8;
}

.navigator:first-child:before {
  display: none;
}

.navigator-text {
  flex: 1;
}

.navigator-arrow {
  padding-right: 13px;
  position: relative;
}

.navigator-arrow:after {
  /* content: " ";
  display: inline-block;
  height: 18rpx;
  width: 18rpx;
  border-width: 2rpx 2rpx 0 0;
  border-color: #d8d8d8;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); */
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 14px;
}

.kind-list-item {
  /* margin: 10px 0; */
  background-color: #f9f6f5;
  border-radius: 2px;
  overflow: hidden;
  border-bottom: 1px solid #888;
}

.kind-list-item:first-child {
  margin-top: 0;
}

.kind-list-text {
  color: #d8d8d8;
  flex: 1;
}

.kind-list-img {
  width: 30px;
  height: 30px;
}

.kind-list-item-hd {
  padding: 15px;
  display: flex;
  align-items: center;
  background: #f9f6f5;
  transition: opacity 0.3s;
}

.kind-list-item-hd-show {
  background: #f9f6f5;
  /* opacity: 0.2; */
}

.kind-list-item-bd {
  height: 0;
  overflow: hidden;
  z-index: 100;
}

.kind-list-item-bd-show {
  height: auto;
  z-index: 100;
}

.picker_txt {
  color: #bbb;
  font-size: 12px;
}

/* --------------------------------------------------------------------- */
</style>